/*
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2025-04-28 11:21:46
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-04-28 15:18:47
 * @FilePath: \BLOG\src\direvtive\pio.ts
 */
import type { App, Directive } from 'vue';

// 定义自定义指令对象
const pioDirective: Directive = {
  // 当指令绑定的元素挂载到 DOM 时触发
  mounted(el: HTMLElement, binding) {
    // 获取全局的 Pio 实例
    const pio = window.pio_instance;

    // 解析指令参数
    const { value } = binding;
    const text = value?.text || el.innerText.trim();
    const type = value?.type || 'default';

    // 创建事件处理函数
    const handler = () => {
      // 确保 Pio 实例和相关方法存在
      if (!pio?.modules?.showByDirective) return;

      // 调用 Live2D 的展示方法，传递处理后的参数
      pio.modules.showByDirective({
        getAttribute: (name: string) => {
          return { text, type }[name.replace('data-pio-', '')];
        }
      });
    };

    // 为元素添加鼠标悬浮事件监听器
    el.addEventListener('mouseenter', handler);

    // 在元素上存储事件处理函数引用，方便卸载时移除
    el._pioHandler = handler;
  },
  // 当指令绑定的元素从 DOM 中卸载时触发
  unmounted(el: HTMLElement) {
    // 移除事件监听器
    if (el._pioHandler) {
      el.removeEventListener('mouseenter', el._pioHandler);
      delete el._pioHandler;
    }
  }
};

// 导出指令注册函数
export default (app: App) => {
  app.directive('pio', pioDirective);
};
